<template>
  <div class="app-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2 class="page-title">标的详情</h2>
      <p class="page-subtitle">查看标的完整信息及相关记录</p>
    </div>

    <!-- 状态标签 -->
    <div v-if="lendDetail.lend.id" class="status-tag">
      <el-tag
        :type="getStatusType(lendDetail.lend.param.status)"
        size="large"
        effect="dark"
      >
        {{ lendDetail.lend.param.status }}
      </el-tag>
      <span class="status-tag__no">标的编号：{{ lendDetail.lend.lendNo }}</span>
    </div>

    <!-- 标的信息卡片 -->
    <el-card class="info-card" shadow="hover">
      <div slot="header" class="card-header">
        <i class="el-icon-info-circle"></i>
        <span>标的信息</span>
      </div>
      <div class="info-table">
        <table width="100%">
          <tbody>
          <tr>
            <th width="15%">标题</th>
            <td width="35%">{{ lendDetail.lend.title }}</td>
            <th width="15%">标的金额</th>
            <td width="35%" class="text-important">{{ lendDetail.lend.amount | formatMoney }}元</td>
          </tr>
          <tr>
            <th>投资期数</th>
            <td>{{ lendDetail.lend.period }}个月</td>
            <th>最低投资金额</th>
            <td>{{ lendDetail.lend.lowestAmount | formatMoney }}元</td>
          </tr>
          <tr>
            <th>年化利率</th>
            <td>
              标的：<span class="rate">{{ lendDetail.lend.lendYearRate * 100 }}%</span><br>
              平台：{{ lendDetail.lend.serviceRate * 100 }}%
            </td>
            <th>还款方式</th>
            <td>{{ lendDetail.lend.param.returnMethod }}</td>
          </tr>
          <tr>
            <th>发布日期</th>
            <td>{{ lendDetail.lend.publishDate }}</td>
            <th>开始日期</th>
            <td>{{ lendDetail.lend.lendStartDate }}</td>
          </tr>
          <tr>
            <th>结束日期</th>
            <td>{{ lendDetail.lend.lendEndDate }}</td>
            <th>创建时间</th>
            <td>{{ lendDetail.lend.createTime }}</td>
          </tr>
          <tr>
            <th>已投金额</th>
            <td class="text-important">{{ lendDetail.lend.investAmount | formatMoney }}元</td>
            <th>投资人数</th>
            <td>{{ lendDetail.lend.investNum }}人</td>
          </tr>
          <tr>
            <th>说明</th>
            <td colspan="3" class="description">{{ lendDetail.lend.lendInfo }}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </el-card>

    <!-- 平台收益信息卡片 -->
    <el-card class="info-card" shadow="hover">
      <div slot="header" class="card-header">
        <i class="el-icon-money"></i>
        <span>平台收益信息</span>
      </div>
      <div class="info-table">
        <table width="100%">
          <tbody>
          <tr>
            <th width="15%">标的预期收益</th>
            <td width="35%" class="text-important">{{ lendDetail.lend.expectAmount | formatMoney }}元</td>
            <th width="15%">标的已获取收益</th>
            <td width="35%">{{ lendDetail.lend.realAmount | formatMoney }}元</td>
          </tr>
          </tbody>
        </table>
      </div>
    </el-card>

    <!-- 借款人信息卡片 -->
    <el-card class="info-card" shadow="hover">
      <div slot="header" class="card-header">
        <i class="el-icon-user"></i>
        <span>借款人信息</span>
      </div>
      <div class="info-table">
        <table width="100%">
          <tbody>
          <tr>
            <th width="15%">借款人</th>
            <td width="35%">{{ lendDetail.borrower.name }}</td>
            <th width="15%">手机</th>
            <td width="35%">{{ lendDetail.borrower.mobile }}</td>
          </tr>
          <tr>
            <th>身份证</th>
            <td>{{ formatIdCard(lendDetail.borrower.idCard) }}</td>
            <th>性别</th>
            <td>{{ lendDetail.borrower.sex }}</td>
          </tr>
          <tr>
            <th>年龄</th>
            <td>{{ lendDetail.borrower.age }}</td>
            <th>婚姻状况</th>
            <td>{{ lendDetail.borrower.marry }}</td>
          </tr>
          <tr>
            <th>学历</th>
            <td>{{ lendDetail.borrower.education }}</td>
            <th>行业</th>
            <td>{{ lendDetail.borrower.industry }}</td>
          </tr>
          <tr>
            <th>月收入</th>
            <td>{{ lendDetail.borrower.income }}</td>
            <th>还款来源</th>
            <td>{{ lendDetail.borrower.returnSource }}</td>
          </tr>
          <tr>
            <th>注册时间</th>
            <td>{{ lendDetail.borrower.createTime }}</td>
            <th>状态</th>
            <td>{{ lendDetail.borrower.status }}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </el-card>

    <!-- 投资记录表格 -->
    <el-card class="table-card" shadow="hover">
      <div slot="header" class="card-header">
        <i class="el-icon-list-alt"></i>
        <span>投资记录</span>
        <span class="count-badge">{{ lendItemList.length }}条记录</span>
      </div>
      <el-table
        :data="lendItemList"
        stripe
        border
        v-loading="loading.invest"
        element-loading-text="加载中..."
        :header-cell-style="headerCellStyle"
      >
        <el-table-column type="index" label="序号" width="70" align="center" />
        <el-table-column prop="lendItemNo" label="投资编号" />
        <el-table-column prop="investName" label="投资用户" />
        <el-table-column prop="investAmount" label="投资金额">
          <template slot-scope="scope">{{ scope.row.investAmount | formatMoney }}元</template>
        </el-table-column>
        <el-table-column label="年化利率">
          <template slot-scope="scope">
            <span class="rate">{{ scope.row.lendYearRate * 100 }}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="investTime" label="投资时间" />
        <el-table-column prop="lendStartDate" label="开始日期" />
        <el-table-column prop="lendEndDate" label="结束日期" />
        <el-table-column prop="expectAmount" label="预期收益">
          <template slot-scope="scope">{{ scope.row.expectAmount | formatMoney }}元</template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 还款计划表格 -->
    <el-card class="table-card" shadow="hover">
      <div slot="header" class="card-header">
        <i class="el-icon-calendar-check"></i>
        <span>还款计划</span>
        <span class="count-badge">{{ lendReturnList.length }}条记录</span>
      </div>
      <el-table
        :data="lendReturnList"
        stripe
        border
        v-loading="loading.repayment"
        element-loading-text="加载中..."
        :header-cell-style="headerCellStyle"
      >
        <el-table-column type="index" label="序号" width="70" align="center" />
        <el-table-column prop="currentPeriod" label="当前期数" />
        <el-table-column prop="principal" label="本金">
          <template slot-scope="scope">{{ scope.row.principal | formatMoney }}元</template>
        </el-table-column>
        <el-table-column prop="interest" label="利息">
          <template slot-scope="scope">{{ scope.row.interest | formatMoney }}元</template>
        </el-table-column>
        <el-table-column prop="total" label="本息">
          <template slot-scope="scope">{{ scope.row.total | formatMoney }}元</template>
        </el-table-column>
        <el-table-column prop="returnDate" label="还款日期" width="150" />
        <el-table-column prop="realReturnTime" label="实际还款时间" />
        <el-table-column label="是否逾期" width="180">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.overdue" size="mini">
              是（逾期：{{ scope.row.overdueTotal | formatMoney }}元）
            </el-tag>
            <el-tag type="success" v-else size="mini">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.status === 0 ? 'warning' : 'success'"
              size="mini"
              effect="light"
            >
              {{ scope.row.status === 0 ? '未还款' : '已还款' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 返回按钮 -->
    <div class="action-buttons">
      <el-button
        @click="back"
        type="primary"
        icon="el-icon-arrow-left"
        size="medium"
      >
        返回列表
      </el-button>
    </div>
  </div>
</template>

<script>
import lendApi from '@/api/core/lend'
import lendItemApi from '@/api/core/lend-item'
import lendReturnApi from '@/api/core/lend-return'

export default {
  data() {
    return {
      lendDetail: {
        lend: {
          param: {}
        },
        borrower: {}
      },
      lendItemList: [], // 投资列表
      lendReturnList: [], // 还款计划列表
      loading: {
        invest: false,
        repayment: false
      }
    }
  },

  created() {
    if (this.$route.params.id) {
      this.fetchDataById()
      this.fetchLendItemList()
      this.fetchLendReturnList()
    }
  },

  filters: {
    // 金额格式化过滤器
    formatMoney(value) {
      if (!value) return '0.00'
      return Number(value).toFixed(2)
    }
  },

  methods: {
    // 获取标的详情
    fetchDataById() {
      lendApi.show(this.$route.params.id).then(response => {
        this.lendDetail = response.data.lendDetail
      }).catch(() => {
        this.$message.error('获取标的详情失败')
      })
    },

    // 返回列表页
    back() {
      this.$router.push({ path: '/core/lend/list' })
    },

    // 获取投资记录
    fetchLendItemList() {
      this.loading.invest = true
      lendItemApi.getList(this.$route.params.id)
        .then(response => {
          this.lendItemList = response.data.list
          this.loading.invest = false
        })
        .catch(() => {
          this.loading.invest = false
          this.$message.error('获取投资记录失败')
        })
    },

    // 获取还款计划
    fetchLendReturnList() {
      this.loading.repayment = true
      lendReturnApi.getList(this.$route.params.id)
        .then(response => {
          this.lendReturnList = response.data.list
          this.loading.repayment = false
        })
        .catch(() => {
          this.loading.repayment = false
          this.$message.error('获取还款计划失败')
        })
    },

    // 格式化身份证号（中间隐藏）
    formatIdCard(idCard) {
      if (!idCard) return ''
      return idCard.replace(/(\d{6})(\d{8})(\d{4})/, '$1********$3')
    },

    // 根据状态获取标签类型
    getStatusType(status) {
      const statusMap = {
        '未放款': 'warning',
        '已放款': 'success',
        '已结束': 'info',
        '已撤销': 'danger'
      }
      return statusMap[status] || 'primary'
    }
  },

  computed: {
    // 表格头部样式
    headerCellStyle() {
      return {
        'background-color': '#f5f7fa',
        'font-weight': '500',
        'color': '#4e5969'
      }
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
}

/* 页面标题样式 */
.page-header {
  margin-bottom: 24px;
}

.page-title {
  font-size: 22px;
  color: #1f2d3d;
  margin: 0 0 8px 0;
  font-weight: 500;
}

.page-subtitle {
  font-size: 14px;
  color: #8392a5;
  margin: 0;
}

/* 状态标签样式 */
.status-tag {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.status-tag__no {
  font-size: 14px;
  color: #4e5969;
  padding-top: 4px;
}

/* 卡片通用样式 */
.info-card, .table-card {
  margin-bottom: 24px;
  border-radius: 6px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

/* 卡片头部样式 */
.card-header {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #1f2d3d;
  font-weight: 500;
  padding: 14px 20px;
  background-color: #fff;
  border-bottom: 1px solid #f2f3f5;
}

.card-header i {
  margin-right: 8px;
  color: #1890ff;
}

.count-badge {
  margin-left: auto;
  font-size: 13px;
  color: #8392a5;
  background-color: #f5f7fa;
  padding: 2px 8px;
  border-radius: 12px;
}

/* 信息表格样式 */
.info-table table {
  border-collapse: collapse;
  width: 100%;
}

.info-table th,
.info-table td {
  padding: 12px 15px;
  text-align: left;
  border: 1px solid #f0f2f5;
  font-size: 14px;
}

.info-table th {
  background-color: #f7f8fa;
  color: #4e5969;
  font-weight: 500;
  width: 15%;
}

.info-table td {
  color: #1f2d3d;
}

/* 特殊文本样式 */
.text-important {
  color: #f56c6c;
  font-weight: 500;
}

.rate {
  color: #f56c6c;
  font-weight: 500;
}

.description {
  line-height: 1.6;
  word-break: break-all;
}

/* 按钮样式 */
.action-buttons {
  margin-top: 30px;
  text-align: center;
}

/* 表格样式优化 */
::v-deep .el-table {
  border-radius: 0;
  border-top: none;
}

::v-deep .el-table tr:hover > td {
  background-color: #f0f7ff !important;
}

::v-deep .el-table__empty-block {
  min-height: 200px;
}

/* 加载样式 */
::v-deep .el-loading-spinner {
  top: 50%;
  transform: translateY(-50%);
}
</style>
